<script>
  import Tooltip from 'ant-design-vue/es/tooltip'
  import { cutStrByFullLength, getStrFullLength } from '@/utils/stringUtil'

  export default {
    name: 'Ellipsis',
    components: {
      Tooltip,
    },
    props: {
      prefixCls: {
        type: String,
        default: 'ant-pro-ellipsis',
      },
      tooltip: {
        type: Boolean,
      },
      length: {
        type: Number,
        required: true,
      },
      lines: {
        type: Number,
        default: 1,
      },
      fullWidthRecognition: {
        type: Boolean,
        default: false,
      },
    },
    methods: {
      getStrDom(str, fullLength) {
        return <span>{cutStrByFullLength(str, this.length) + (fullLength > this.length ? '...' : '')}</span>
      },
      getTooltip(fullStr, fullLength) {
        return (
          <Tooltip>
            <template slot="title">{fullStr}</template>
            {this.getStrDom(fullStr, fullLength)}
          </Tooltip>
        )
      },
    },
    render() {
      const { tooltip, length } = this.$props
      const str = this.$slots.default.map(vNode => vNode.text).join('')
      const fullLength = getStrFullLength(str)
      const strDom = tooltip && fullLength > length ? this.getTooltip(str, fullLength) : this.getStrDom(str, fullLength)
      return strDom
    },
  }
</script>
